效果：

黑客帝国数字背景js

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>hk</title>
</head>
<body>
<canvas id='d1' height="1080" width="1920"
        style="position:fixed;z-index:-2;filter: alpha(opacity:50);opacity: 0.5"></canvas>
<script>
    var canvas = document.getElementById('d1');
    var ctx = canvas.getContext('2d');


    canvas.height = window.innerHeight;
    canvas.width = window.innerWidth;

    var texts = '0123456789'.split('');

    var fontSize = 16;
    var columns = canvas.width / fontSize;
    var drops = [];
    for (var x = 0; x < columns; x++) {
        drops[x] = 1;
    }

    function draw() {
        ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        ctx.fillStyle = '#0F0';
        ctx.font = fontSize + 'px arial';
        for (var i = 0; i < drops.length; i++) {
            var text = texts[Math.floor(Math.random() * texts.length)];
            ctx.fillText(text, i * fontSize, drops[i] * fontSize);

            if (drops[i] * fontSize > canvas.height || Math.random() > 0.95) {
                drops[i] = 0;
            }

            drops[i]++;
        }
    }

    setInterval(draw, 33);
</script>
</body>
</html>
葫芦的运维日志
打赏